import React from "react";
// import store from './store';
import { connect } from "react-redux";

const TodoList = (props) => {
	const { inputValue, list } = props.value;
	const { inputChange, clickBtn } = props;
	return (
		<>
			<div>
				<input value={inputValue} onChange={inputChange} />
				<button onClick={clickBtn}>提交</button>
				<ul>
					{list.map((item, index) => (
						<li key={index}>{item}</li>
					))}
				</ul>
			</div>
		</>
	);
};

const stateToProps = (state) => {
	console.log("state :>> ", state);
	// return {
	// 	inputValue: state.inputValue,
	// 	list: state.list,
	// };
	return { value: state };
};

const dispatchToProps = (dispatch) => {
	return {
		inputChange: (e) => {
			// console.log(e.target.value);
			let action = {
				type: "changeInput",
				value: e.target.value,
			};
			dispatch(action);
		},

		clickBtn: () => {
			let action = { type: "addItem" };
			dispatch(action);
		},
	};
};

export default connect(stateToProps, dispatchToProps)(TodoList);
